新しいヘッドレスCMS NewtのAppテンプレートを使用して、プロジェクトを作成する

Newtは、2022年3月に提供を開始した日本製のヘッドレスCMSになります。

今回は、Newtを使用して簡単にプロジェクトを作成できる、Appテンプレートを使用してみました。

試してみた

ちなみに、コンテンツの作成など、基本的な操作は以下のエントリで紹介しています。

Appテンプレートの追加

Newtにログインし、新規スペースを作成します。

「Appを追加」から、Appテンプレートを選択します。

豊富なテンプレートがあります。今回はBlogを選択し、右上の「このテンプレートを追加」を選択します。

作成するとコンテンツのダッシュボードに移動します。スタイリッシュなデザインで、これ自体がブログのようですね。

App設定から、テンプレートで使用しているスキーマを見ることができます。以下は、Articleのスキーマ一覧になります。

次にNext.jsのプロジェクトを作成します。以下から、それぞれのテンプレートの、コードとデモを見ることができます。

コードのClone

選択したテンプレートと、同じソースコードをcloneします。今回は、Blog用のソースコードをcloneしています。

$ git clone git@github.com:Newt-Inc/newt-blog-starter-nextjs.git

cd newt-blog-starter-nextjs/

依存パッケージをインストールします。

$ yarn install

環境変数の更新

ダッシュボードに戻り、以下の確認します。

スペースUID

スペース設定に移動して、サイドバーの「一般」を確認します。

AppUID

App設定の「一般」から確認

CDN Token

スペース設定の「APIキー」から、「Newt CDN API Tokenを作成」を選択し、トークンを作成します。

確認した環境変数スペースUID、AppUID、CDN APIトークンを、それぞれ書き換えます。

NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=AppUID
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン
NEXT_PUBLIC_NEWT_API_TYPE=cdn
NEXT_PUBLIC_NEWT_ARTICLE_MODEL_UID=article
NEXT_PUBLIC_NEWT_CATEGORY_MODEL_UID=category
NEXT_PUBLIC_PAGE_LIMIT=12

では、ローカル環境を立ち上げて確認します。

$ yarn dev

Blogテンプレートを表示することができました。

コンテンツの追加

コンテンツを追加してみます。 作成したBlogのダッシュボードに戻ります。右側の「投稿を追加」を選択し、項目を埋めて「保存して公開」を選択します。

再び、Next.jsのプロジェクトに戻り、環境を再度立ち上げます。

$ yarn dev

新規に作成したコンテンツが、表示されています。

まとめ

今回は、NewtのAppテンプレートを使用してブログを作成してみました。日本製ということもあり、シンプルで使いやすいです。Appテンプレートは、初めてヘッドレスCMSを使用する人にも、使用感を確かめるのにおすすめだと思います。

ではまた。